<template>
    <header>
        <div class="l-content">
            <i class="el-icon-s-unfold"></i>
            OA管理系统
        </div>
        <div class="r-content">
            <el-dropdown trigger="click" szie="mini">
                <span>
                    <img class="user" :src='userImg' alt="">
                </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><a @click="personal">个人中心</a></el-dropdown-item>
                    <el-dropdown-item><a @click="exit">退出</a></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </header>
</template>

<script>
    export default {
        name:'ComponentsHeader',
        data() {
            return {
                userImg:require("../assets/images/123.jpg")
            }
        },
        methods: {
            exit(){
                this.$store.commit('LOGINEXIT')
                this.$router.push('/login')
            },
            personal(){
                this.$bus.$emit('personalCenter',true)
            }
        },
    }
</script>

<style scoped>
    .user{
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    header{
        display: flex;
        width: 100%;
        height: 100px;
        justify-content: space-between;
    }
</style>